<!-- ServiceOrderTable.vue -->
<template>
  <el-table
    :data="list"
    v-loading="loading"
    stripe
    @selection-change="handleSelectionChange"
  >
    <el-table-column 
      v-if="showSelection"
      type="selection"
      width="55"
    />
    
    <el-table-column prop="serviceId" label="订单ID" width="120" />
    <el-table-column prop="patientName" label="患者姓名" />
    <el-table-column prop="doctorName" label="医生姓名" />
    <el-table-column prop="serviceTypeName" label="服务类型" />
    
    <el-table-column label="状态" width="120">
      <template #default="{row}">
        <el-tag :type="statusTag[row.status]">
          {{ statusMap[row.status] }}
        </el-tag>
      </template>
    </el-table-column>
    
    <el-table-column label="总价" width="120">
      <template #default="{row}">￥{{ row.totalPrice }}</template>
    </el-table-column>
    
    <el-table-column label="下单时间" width="180">
      <template #default="{row}">
        {{ formatDate(row.orderTime) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" fixed="right">
  <template #default="{row}">
  
    <el-button link type="warning" @click="$emit('service-detail', row.serviceId)">
      服务记录
    </el-button>
    <el-button link type="danger" @click="$emit('delete', row.serviceId)">
      删除
    </el-button>
  </template>
</el-table-column>
  </el-table>
</template>

<script setup>
import { formatDate } from '@/utils/date'

defineProps({
  list: Array,
  loading: Boolean,
  showSelection: Boolean
})

const emit = defineEmits(['selection-change'])

const statusMap = {
  1: '未开始',
  2: '进行中',
  3: '已结束'
}

const statusTag = {
  1: 'info',
  2: 'warning',
  3: 'success'
}

const handleSelectionChange = (selection) => {
  emit('selection-change', selection)
}
</script>